

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="CodeHope">
  <meta name="author" content="CodeHope">
  <meta name="keywords" content="希望">
  <title>Webpack整理 - CodeHope</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      
        
          
          
          
        
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" />
      
      
        <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" />
      
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"quancundexiwang.wang","root":"/","version":"1.8.7","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":true,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":true},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz","app_key":"hMuhiD4FRqhns4giqLiEH9HG","server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
  <header style="height: 80vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>CodeHope</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                村头
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                我
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2159968526,2400154655&fm=15&gp=0.jpg') repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Webpack整理">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-08-29 09:44" pubdate>
        2020年8月29日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      8.3k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      115
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Webpack整理</h1>
            
            <div class="markdown-body">
              <h1 id="webpack-记录从零开始配置"><a href="#webpack-记录从零开始配置" class="headerlink" title="webpack 记录从零开始配置"></a>webpack 记录从零开始配置</h1><h2 id="1-webpack-初始化一个项目"><a href="#1-webpack-初始化一个项目" class="headerlink" title="1.webpack-初始化一个项目"></a>1.webpack-初始化一个项目</h2><blockquote>
<p>webpack本地安装，目录规范</p>
</blockquote>
<hr>
<p>首先初始化一个node 环境</p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm init 然后自定义配置！生成package.json文件！<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>我现在准备使用的是<code>webpack 4.x</code></p>
<blockquote>
<blockquote>
<p>所以需要安装webpack 以及 webpack-cli</p>
</blockquote>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm install --save-dev webpack
npm install webpack webpack-cli --save-dev<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>然后个人习惯先创建三个文件夹</p>
<ul>
<li>  src—-放项目源码 个人习惯main.js当做入口文件！</li>
<li>  public-放index.html favicon.ico文件…</li>
<li>  bulid–放webpack的各种配置文件,分成：公共，开发，生产，三个配置文件<strong>公共配置webpack.common.js、开发环境webpack.dev.js、生成环境webpack.prod.js</strong></li>
</ul>
<p>至此文件目录树是这样的</p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">| build
|	-webpack.common.js
| 	-webpack.dev.js
|	-webpack.prod.js
|public
|	-favicon.ico
|	-index.html
|src
|	-main.js<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="2-Webpack基础配置信息解析"><a href="#2-Webpack基础配置信息解析" class="headerlink" title="2.Webpack基础配置信息解析"></a>2.Webpack基础配置信息解析</h2><div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">    <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
      mode<span class="token operator">:</span> <span class="token string">"none"</span><span class="token punctuation">,</span> <span class="token comment">//执行配置的环境</span>
      entry<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"src/main.js"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//入口</span>
      output<span class="token operator">:</span> <span class="token punctuation">&#123;</span><span class="token comment">//出口</span>
        path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
         <span class="token comment">//必须是一个绝对路径</span>
        filename<span class="token operator">:</span> <span class="token string">"bundle[hash:6].js"</span><span class="token punctuation">,</span> 
        <span class="token comment">//打包完成后生成的js文件名可以加hash值防止短时间内多次打包产生缓存！</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token comment">//我们写完这些基础的配置信息之后，就可以打包了，我们在package.json文件中需要配置脚本</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-json" data-language="json"><code class="language-json">package.json
 <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
    <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"webpack --config ./build/webpack.common.js"</span><span class="token comment">//指向配置信息</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后运行打包命令    <code> npm run build</code></p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">root1@此男只应天上有 C_Better_Webpack % npm run build

&gt; c_better_webpack@1.0.0 build &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack
&gt; webpack --config  .&#x2F;build&#x2F;webpack.common.js

    Asset      Size  Chunks             Chunk Names
bundle.js  3.59 KiB       0  [emitted]  main
Entrypoint main &#x3D; bundle.js

源码内容
console.log(1);
生成并且运行dist bundle.js
1
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>说明可以正常打包的，</p>
<blockquote>
<blockquote>
<p>下一步我们将使用插件生成HTML代码创建一个本地服务器，来实时查看打包结果</p>
</blockquote>
</blockquote>
<h2 id="3-webpack搭建本地服务器"><a href="#3-webpack搭建本地服务器" class="headerlink" title="3.webpack搭建本地服务器"></a>3.webpack搭建本地服务器</h2><p>首先我们先安装这个Npm包</p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm i webpack-dev-server -D 

&#x2F;&#x2F;安装完之后，配置package.json

&quot;dev&quot;: &quot;webpack-dev-server --config  .&#x2F;build&#x2F;webpack.common.js&quot;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>就可以运行</p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm run dev
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>我们可以在配置文件中，设置devServer对象,来配置本地服务器</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">devServer<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
   port<span class="token operator">:</span> <span class="token number">5200</span><span class="token punctuation">,</span>
   progress<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
   <span class="token operator">...</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>启动成功</p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">10% building 1&#x2F;1 modules 0 activeℹ ｢wds｣: Project is running at http:&#x2F;&#x2F;localhost:5200&#x2F;
.........................................................
ℹ ｢wdm｣: Compiled successfully.
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>当我们运行本地服务器开发环境的时候，webpack并不会真正的打包成文件，他只是打包到内存中，提供一个本地服务器</p>
<h3 id="生成HTML并自动关联打包完成的JS文件，运行在浏览器中！"><a href="#生成HTML并自动关联打包完成的JS文件，运行在浏览器中！" class="headerlink" title="生成HTML并自动关联打包完成的JS文件，运行在浏览器中！"></a>生成HTML并自动关联打包完成的JS文件，运行在浏览器中！</h3><p>安装<code>html-webpack-plugin</code></p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm install html-webpack-plugin -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>然后编写配置文件！    </p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//首先引入 html-webpack-plugin这个插件</span>
    <span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token comment">//webpack插件都是写在配置文件plugins这个数组中！</span>
      plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
          template<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//以哪个文件为模板</span>
          filename<span class="token operator">:</span> <span class="token string">"index.html"</span><span class="token punctuation">,</span><span class="token comment">//打包完之后生成的html文件名称！</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">运行-npm run dev<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">Built at: 2020-05-11 17:23:26
     Asset       Size  	   Chunks     Chunk Names
 bundle.js    	337 KiB       0       [emitted]  main
index.html  	237 bytes             [emitted]  
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>发现相比之前打包生成了html文件！点开本地服务器地址打开了页面，并且代码正常运行！  </p>
<div class="code-wrapper"><pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm run build 生成的目录  
|dist  
| -bundle.js  
| —index.html  <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>本地服务器+html成功！</p>
<h2 id="4-Webpack-配置样式Loader的使用①"><a href="#4-Webpack-配置样式Loader的使用①" class="headerlink" title="4.Webpack-配置样式Loader的使用①"></a>4.Webpack-配置样式Loader的使用①</h2><h2 id="loader的使用！"><a href="#loader的使用！" class="headerlink" title="loader的使用！"></a>loader的使用！</h2><p>在当前项目中我们创建 一个css文件，我们知道webpack默认是不支持css的，我们试一下会发生什么？</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">    <span class="token operator">|</span>src  
    <span class="token operator">|</span><span class="token operator">-</span>assets  
    <span class="token operator">|</span>–style  
    <span class="token operator">|</span><span class="token operator">--</span><span class="token operator">--</span>main<span class="token punctuation">.</span>css

<span class="token comment">//main.css加入简单的样式</span>
   body <span class="token punctuation">&#123;</span>
     background<span class="token operator">-</span>color<span class="token operator">:</span> salmon<span class="token punctuation">;</span>
   <span class="token punctuation">&#125;</span>

<span class="token comment">//然后在main.js引入，（使用es6的improt也需要装loader)webpackmorn支持common.js    </span>

<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./asstes/style/main.css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">然后启动本地服务器

    You may need an appropriate loader to handle <span class="token keyword">this</span> file type<span class="token punctuation">,</span> currently no loaders are configured to process <span class="token keyword">this</span> file<span class="token punctuation">.</span> See https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>webpack<span class="token punctuation">.</span>js<span class="token punctuation">.</span>org<span class="token operator">/</span>concepts#loaders
    <span class="token operator">></span> body <span class="token punctuation">&#123;</span>
    <span class="token operator">|</span>   background<span class="token operator">-</span>color<span class="token operator">:</span> salmon<span class="token punctuation">;</span>
    <span class="token operator">|</span> <span class="token punctuation">&#125;</span>
     @ <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>main<span class="token punctuation">.</span>js <span class="token number">1</span><span class="token operator">:</span><span class="token number">0</span><span class="token operator">-</span><span class="token number">34</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>你可能需要loader去支持这个文件类型模块！</p>
<p>首先了解一下loader</p>
<blockquote>
<p>单一性，一个loader做一个事情，所以经常遇到完成一个功能需要引入多个loader</p>
</blockquote>
<p>在我们项目中需要识别css文件类型需要安装</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">css<span class="token operator">-</span>laoder <span class="token comment">//识别css语法</span>
style<span class="token operator">-</span>loader<span class="token comment">//将css插入到head标签中！</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F;安装
npm i css-loader style-loader -D<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>安装完之后我们就来到webpack的配置文件对loader模块进行配置  </p>
<p>我们是安装这个loader让它支持除JS之外的模块，所以就放到module这个对象属性中！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">module<span class="token operator">:</span> <span class="token punctuation">&#123;</span><span class="token comment">//模块，配置使webpack支持其他文件格式！</span>
  rules<span class="token operator">:</span><span class="token punctuation">[</span><span class="token comment">//规则嘛，适配模块的规则</span>
    <span class="token punctuation">&#123;</span>
  test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> 
   <span class="token comment">//正则匹配到.css结尾</span>
  <span class="token comment">//loader是从 右往左执行的 ,所以先处理css，然后再插入head标签</span>
   <span class="token comment">// 当只需要一个loader的时候-use可以写成字符串形式user:"style-loader"</span>
  <span class="token comment">//当你需要对loader进行一些配置，你也可以写成对象形式！</span>
  <span class="token comment">//&#123;</span>
    	<span class="token comment">//   test: /\.css$/,</span>
    	<span class="token comment">//   use: [</span>
    	<span class="token comment">//     &#123;</span>
    	<span class="token comment">//       loader: "style-loader",</span>
    	<span class="token comment">//       options: &#123;&#125;,</span>
    	<span class="token comment">//     &#125;,</span>
    	<span class="token comment">//     "css-loader",</span>
    	<span class="token comment">//   ],</span>
    	<span class="token comment">// &#125;,</span>
    	
use<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//使用这两个lodaer</span>
     <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>打开弹出的浏览器看看dom!!</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;style>body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> salmon<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
&lt;/style>
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>成功！O(∩_∩)O虽然之前都会，但是都迷迷糊糊，加强一下印象喽，好久没有自己搭环境了，搞着玩~也是挺有收获的！</p>
<h2 id="安装less-loader"><a href="#安装less-loader" class="headerlink" title=" 安装less-loader"></a> 安装less-loader</h2><p>需要同时使用<code>style-loader,css-loader,less-loader</code>才行！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
     test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
     use<span class="token operator">:</span> <span class="token punctuation">[</span>
       <span class="token punctuation">&#123;</span>
         loader<span class="token operator">:</span> <span class="token string">"style-loader"</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#123;</span>
         loader<span class="token operator">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#123;</span>
         loader<span class="token operator">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
     <span class="token punctuation">]</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="5-Webpack-样式Loader的使用②"><a href="#5-Webpack-样式Loader的使用②" class="headerlink" title="5.Webpack-样式Loader的使用②"></a>5.Webpack-样式Loader的使用②</h2><blockquote>
<p>上面我们把css模块less模块==的样式模块解析并插入head标签里面，这一次我们把这些样式文件，打包的时候能单独分离出来！<br>使用插件！mini-css-extract-plugin</p>
</blockquote>
<p>首先安装插件！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i mini-css-extract-plugin -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>和使用别的插件一样，</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"mini-css-extract-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//引入</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>插件都是一个类</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//实例化，传入配置</span>
 <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
      filename<span class="token operator">:</span> <span class="token string">"main.css"</span><span class="token punctuation">,</span><span class="token comment">//样式文件打包之后的文件！</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>


<span class="token comment">//替换style-loader,就是处理css文件最后插入到那里而已的啦！~</span>
 rules<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token comment">//规则嘛，适配模块的规则</span>
      <span class="token comment">// 当只需要一个loader的时候-use可以写成字符串形式user:"style-loader"</span>
      <span class="token punctuation">&#123;</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span> <span class="token punctuation">[</span>
		MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span><span class="token comment">//替换style-loader</span>
 		<span class="token string">"css-loader"</span>
		<span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#123;</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span> <span class="token punctuation">[</span>
          MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span>
          <span class="token punctuation">&#123;</span>
            loader<span class="token operator">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>
          <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
          <span class="token punctuation">&#123;</span>
            loader<span class="token operator">:</span> <span class="token string">"less-loader"</span><span class="token punctuation">,</span>
          <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>结果  </p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token operator">|</span><span class="token operator">-</span>dist  
<span class="token operator">|</span>–index<span class="token punctuation">.</span>html  
<span class="token operator">|</span>–main<span class="token punctuation">.</span>css<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>main.css</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css">
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> salmon<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>不管是css文件还是less文件都被编译到一个css文件中去！<br>loader这种东西理解怎么用就好啦！具体还是要看文档过一遍！</p>
<h2 id="6-optimization优化项"><a href="#6-optimization优化项" class="headerlink" title="6.optimization优化项"></a>6.optimization优化项</h2><blockquote>
<p>optimization优化项中的配置，只有在生产模式下才生效！</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> TerserJSPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"terser-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> OptimizeCSSAssetsPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"optimize-css-assets-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token operator">--</span>
mode<span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
  optimization<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">//这个优化只有生产模式才走！ TerserJSPlugin 优化打包js去掉空格换行 OptimizeCSSAssetsPlugin优化css去掉空格和换行</span>
    minimizer<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">TerserJSPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">OptimizeCSSAssetsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>

<h2 id="7-webpack将es6及更高级语法转为es5"><a href="#7-webpack将es6及更高级语法转为es5" class="headerlink" title="7.webpack将es6及更高级语法转为es5"></a>7.webpack将es6及更高级语法转为es5</h2><blockquote>
<p>npm i<br>babel-loader  //负责 es6 语法转化<br>@babel/core //babel核心代码<br>@babel/preset-env -D//包含 es6、7 等版本的语法转化规则</p>
</blockquote>
<p>首先安装包</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i babel-loader @babel&#x2F;core @babel&#x2F;preset-env -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
   test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
   use<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
     loader<span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
     options<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
     presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
     <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"../src/asstes/style/main.less"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"./asstes/style/main.css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
    
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> a<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    
<span class="token keyword">class</span> <span class="token class-name">A</span> <span class="token punctuation">&#123;</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">const</span> instanceA <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">A</span><span class="token punctuation">(</span><span class="token string">"hah"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>instanceA<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>正常编译！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fn1</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  z<span class="token punctuation">;</span>
  <span class="token keyword">return</span> d<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token function">fn1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>控制台报错！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">ReferenceError: regeneratorRuntime is not defined<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>发现不支持生成器函数！所以可能babel基础包不能完整的支持所有的es6的语法,那么就需要babel的拓展包(Polyfill)Poly填充的意思！扩展包！</p>
<p>** 但是**</p>
<p>babel-polyfill可能会污染子模块的局部作用域，严重的可能会导致冲突<br>babel-polyfill 可能会增加很多根本没有用到的 polyfill；</p>
<p>** 就要用到这个**</p>
<p><a target="_blank" rel="noopener" href="https://babeljs.io/docs/en/babel-plugin-transform-runtime">babel文档</a></p>
<p>Babel插件：@babel/plugin-transform-runtime</p>
<p><strong>安装</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm install --save-dev @babel&#x2F;plugin-transform-runtime  &#x2F;&#x2F;开发依赖项。
npm install --save @babel&#x2F;runtime &#x2F;&#x2F;作为生产依赖项<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>


<p>安装完成之后我们需要配置一个 <strong>.babelrc.json</strong>文件，这里面放的是babel用的插件！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"> <span class="token comment">//这是不带配置项的配置，需要配置项的可以去文档里查看</span>
 <span class="token punctuation">&#123;</span>
   <span class="token string">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/plugin-transform-runtime"</span><span class="token punctuation">]</span>
 <span class="token punctuation">&#125;</span>
 
 <span class="token comment">//example 携带配置项！</span>
 <span class="token punctuation">&#123;</span>
   <span class="token string">"plugins"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
     <span class="token punctuation">[</span>
       <span class="token string">"@babel/plugin-transform-runtime"</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#123;</span>
         <span class="token string">"absoluteRuntime"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
         <span class="token string">"corejs"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
         <span class="token string">"helpers"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
         <span class="token string">"regenerator"</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
         <span class="token string">"useESModules"</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
         <span class="token string">"version"</span><span class="token operator">:</span> <span class="token string">"7.0.0-beta.0"</span>
       <span class="token punctuation">&#125;</span>
     <span class="token punctuation">]</span>
   <span class="token punctuation">]</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>

<p>这样完成了开发环境的babel配置 基本上能支持完整的es6语法 ，后面会完成开发环境 和 生产环境的两部分配置的！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">fn1</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  <span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> d<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>

<span class="token function">fn1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//2</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="8-webpack添加JS代码校验-ES-lint"><a href="#8-webpack添加JS代码校验-ES-lint" class="headerlink" title="8.webpack添加JS代码校验-ES-lint"></a>8.webpack添加JS代码校验-ES-lint</h2><p> 首先，要使webpack支持eslint，就要要安装 <code>eslint-loader</code> 和 <code>eslint</code></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm install --save-dev eslint-loader eslint<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p> 在webpack配置文件中添加loader</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
   test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
   use<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
      loader<span class="token operator">:</span> <span class="token string">"eslint-loader"</span><span class="token punctuation">,</span>
      options<span class="token operator">:</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 这里的配置项参数将会被传递到 eslint 的 CLIEngine</span>
        enforce<span class="token operator">:</span> <span class="token string">"pre"</span><span class="token punctuation">,</span><span class="token comment">//强制执行pre首先执行，先校验在编译代码！</span>
        include<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">//指定检查的目录</span>
     <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p> 配置完成运行项目会抛出一个警告⚠️</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">client:135 .&#x2F;node_modules&#x2F;querystring-es3&#x2F;decode.js
Module Warning (from .&#x2F;node_modules&#x2F;eslint-loader&#x2F;dist&#x2F;cjs.js):
No ESLint configuration found in &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack&#x2F;node_modules&#x2F;
querystring-es3.
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>意思是没有eslint的配置文件  </p>
<p>项目想要使用那些eslin规则，可以创建一个配置项文件 ‘<code>.eslintrc.js</code>’，代码如下:<br><a target="_blank" rel="noopener" href="https://eslint.bootcss.com/docs/user-guide/getting-started">ES-lint文档</a><br><a target="_blank" rel="noopener" href="https://eslint.bootcss.com/docs/user-guide/configuring">ES-Lint高级配置</a></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  env<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    browser<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    commonjs<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    es6<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"eslint:recommended"</span><span class="token punctuation">,</span> <span class="token string">"plugin:vue/essential"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  globals<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    Atomics<span class="token operator">:</span> <span class="token string">"readonly"</span><span class="token punctuation">,</span>
    SharedArrayBuffer<span class="token operator">:</span> <span class="token string">"readonly"</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  parserOptions<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    ecmaVersion<span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  rules<span class="token operator">:</span> <span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>然后就有代码的规范报错提示</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack&#x2F;src&#x2F;main.js
  5:7  error  &#39;fn&#39; is assigned a value but never used  no-unused-vars
    
✖ 1 problem (1 error, 0 warnings)
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>这就完成了eslint的基本配置啦</p>
<h2 id="9-webpack打包图片等文件资源"><a href="#9-webpack打包图片等文件资源" class="headerlink" title="9.webpack打包图片等文件资源"></a>9.webpack打包图片等文件资源</h2><blockquote>
<p>file-loader的使用 </p>
</blockquote>
<p>当我们在js代码中引入一张图片的时候</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> logo <span class="token keyword">from</span> <span class="token string">"../public/favicon.ico"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">You may need an appropriate loader to handle this file type,<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>发现并不支持我们直接使用图片，我们安装一下file-loader</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i file-loader -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>配置webpack的loader</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
  test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(jpg|jpeg|gif|png|ico)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
  loader<span class="token operator">:</span> <span class="token string">"file-loader"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>useage:</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> logo <span class="token keyword">from</span> <span class="token string">"../public/favicon.ico"</span><span class="token punctuation">;</span>
    
<span class="token keyword">const</span> image <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
image<span class="token punctuation">.</span>src <span class="token operator">=</span> logo<span class="token punctuation">;</span>
    
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token comment">&lt;!-- 在dom树中    被打包成这样正常显示！ --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>d093a6a37e8b4cafd004e7f8a6a5a389.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>



<p><strong>当CSS中使用图片资源的时候，比如</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> 2s ease<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../../../public/favicon.ico"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>我们看一下 编译后的样式结果</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">&#123;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid red<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> 2s ease<span class="token punctuation">;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>d093a6a….ico<span class="token punctuation">)</span></span><span class="token punctuation">;</span>//这里也被解析了
    <span class="token property">background-size</span><span class="token punctuation">:</span> 100% 100%<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>

<p>这里的好像是css-loader就可以支持的！</p>
<p><strong>还有一个引入图片的，我是不怎么常用，但是也记录一下把，就是直接在html文件里面插入图片，反正现在这种工程化的项目我是不会这么干的。。</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        hah
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./favicon.ico<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>像这样我们编译完成的时候看DOM树</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./favicon.ico<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>就是原模原样进去的，但是我们打包编译的时候通常文件名是随机生成的hash<br>这样就可能不太好,因为你可能css和html使用同一张图片，但是后来这张图被打包成hash名字，就会出错！<br>这个时候就要用一个<code>html-withimg-loader</code></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm install html-withimg-loader<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>安装完之后直接配置loader</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
   test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
   use<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
     loader<span class="token operator">:</span> <span class="token string">"html-withimg-loader"</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h2 id="10-webpack对静态图片资源的优化"><a href="#10-webpack对静态图片资源的优化" class="headerlink" title="10.webpack对静态图片资源的优化"></a>10.webpack对静态图片资源的优化</h2><blockquote>
<p>Url-loader可以将图片转为base64我们可以，规定大小范围，小的图片我们可以转成base64加载！超过这个规定大小再去请求服务器！</p>
</blockquote>
<p>使用<code>url-loader</code></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm install url-loader --save-dev<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>webpack配置loader</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
    test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif)$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">,</span>
    use<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">&#123;</span>
        <span class="token comment">// loader: 'file-loader',</span>
        <span class="token comment">// options: &#123;</span>
        <span class="token comment">//   name: 'image/[name].[ext]',</span>
        <span class="token comment">//   publicPath:"/"</span>
        <span class="token comment">// &#125;,</span>
          loader<span class="token operator">:</span> <span class="token string">'url-loader'</span><span class="token punctuation">,</span>
          options<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
   <span class="token comment">//规定大小，小于规定大小使用url-loader,</span>
          limit<span class="token operator">:</span> <span class="token number">900000</span><span class="token punctuation">,</span>
          outputPath<span class="token operator">:</span> <span class="token string">"image"</span><span class="token punctuation">,</span><span class="token comment">//配置资源文件夹</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>因为我们把这个限制图片设置的特别大，所以应该都会被打包成base64的图片</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>我们把这个图片限制放小就和file-loader效果一样！生成了图片文件</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image/d093a6a37e8b4cafd004e7f8a6a5a389.ico<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p><code>url-loader</code>是包括<code>file-loader</code>的,配置限制大小决定打包成文件还是Base64资源！</p>
<h2 id="11-webpack配置source-map"><a href="#11-webpack配置source-map" class="headerlink" title="11.webpack配置source-map"></a>11.webpack配置source-map</h2><blockquote>
<p>因为我们在开发的时候，代码经过webpack编译后，所有的代码都是经过编译的，高级语法转成低级语法，所以我们调试的时候不太方便！source-map会帮我们在开发的时候，也能看到源代码，方便开发调试，但是生成的代码文件比较大！所以记得生产环境要过滤掉喔！</p>
</blockquote>
<p>当我们的代码有错误的时候！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">console<span class="token punctuation">.</span><span class="token function">lo</span><span class="token punctuation">(</span>instanceA<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//比如这里我写错。</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>看一下浏览器报错！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">bundle8d1928.js:10549 Uncaught TypeError: console.lo is not a function
    at Module.&lt;anonymous&gt; (bundle8d1928.js:10549)
    at __webpack_require__ (bundle8d1928.js:69)
    at Object.&lt;anonymous&gt; (bundle8d1928.js:253)
    at __webpack_require__ (bundle8d1928.js:69)
    at bundle8d1928.js:245
    at bundle8d1928.js:248<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>它显示的错误文件是 <code>bundle8d1928.js</code>, 我们在开发的时候并不能定位，是N哪里的代码写错不便于开发，<br>这个时候我们可以使用<code>source-map</code></p>
<p>使用source-map</p>
<p>我们直接在webpack里面配置就好啦</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">devtool<span class="token operator">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>然后打包-&gt;<br>你就会发现多了很多.map映射文件！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">30:5
                     Asset       Size  Chunks                         Chunk Names
         1.bundled6c197.js  233 bytes       1  [emitted] [immutable]  
     1.bundled6c197.js.map  213 bytes       1  [emitted] [dev]        
                1.main.css  211 bytes       1  [emitted]              
            1.main.css.map  363 bytes       1  [emitted] [dev]        
         2.bundled6c197.js  233 bytes       2  [emitted] [immutable]  
     2.bundled6c197.js.map  212 bytes       2  [emitte<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>查看此时浏览器报错！就很清楚的知道是哪个文件第几行错误，快速定位，就很NICE!!!</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">main.js:13 Uncaught TypeError: console.lo is not a function
    at Module.&lt;anonymous&gt; (main.js:13)
    at __webpack_require__ (bootstrap:68)
    at Object.&lt;anonymous&gt; (bootstrap:244)
    at __webpack_require__ (bootstrap:68)
    at bootstrap:244
    at bootstrap:244
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p> devtols 关于source-map相关的还有其他的几种配置</p>
<ol>
<li> eval-source-map 不会产生单独的文件，但是可以显示行和列</li>
<li> cheap-module-source-map 不会产生列，但是是一个单独的映射文件！</li>
<li> cheap-module-source-eval-map 不会产生文件，集成在打包后的文件中，没有列.</li>
</ol>
<h2 id="12-Webpack小插件应用！"><a href="#12-Webpack小插件应用！" class="headerlink" title="12.Webpack小插件应用！~~"></a>12.Webpack小插件应用！~~</h2><blockquote>
<p>Webpack小插件，我最喜欢的，<br><code>clean-webpack-plugin</code>-打包之前先删掉上一次打包的<br><code>copy-webpack-plugin</code> -拷贝插件<br><code>banner-plugin</code> - 版权插件 内部插件</p>
</blockquote>
<h3 id="1-clean-webpack-plugin"><a href="#1-clean-webpack-plugin" class="headerlink" title="1.clean-webpack-plugin"></a>1.clean-webpack-plugin</h3><blockquote>
<blockquote>
<p>打包前先删除上一次打包的文件</p>
</blockquote>
</blockquote>
<p>首先<code>安装</code></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i clean-webpack-plugin -D <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p><code>webpack配置</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">&#123;</span> CleanWebpackPlugin <span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"clean-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
 <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
      path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      dry<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      verbose<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      watch<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      exclude<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      allowExternal<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      beforeEmit<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>打包测试终端中可以看到removed这些文件。。</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">clean-webpack-plugin: removed dist&#x2F;1.bundle838de2.js
clean-webpack-plugin: removed dist&#x2F;1.bundle838de2.js.map
clean-webpack-plugin: removed dist&#x2F;1.main.css
clean-webpack-plugin: removed dist&#x2F;1.main.css.map
clean-webpack-plugin: removed dist&#x2F;2.bundle838de2.js
clean-webpack-plugin: removed dist&#x2F;2.bundle838de2.js.map
clean-webpack-plugin: removed dist&#x2F;2.main.css
clean-webpack-plugin: removed dist&#x2F;2.main.css.map
clean-webpack-plugin: removed dist&#x2F;bundle838de2.js
clean-webpack-plugin: removed dist&#x2F;bundle838de2.js.map
clean-webpack-plugin: removed dist&#x2F;favicon.ico
clean-webpack-plugin: removed dist&#x2F;image
clean-webpack-plugin: removed dist&#x2F;image&#x2F;d093a6a37e8b4cafd004e7f8a6a5a389.ico
clean-webpack-plugin: removed dist&#x2F;index.html<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<h3 id="2-copy-webpacl-plugin，"><a href="#2-copy-webpacl-plugin，" class="headerlink" title="2.copy-webpacl-plugin，"></a>2.copy-webpacl-plugin，</h3><blockquote>
<blockquote>
<p>打包的时候做文件复制操作！, 比如说我们开发的时候写了一些文档,每次生打包不想手动复制进去，想把这些文档打包的时候也一起自动丢进去就可以用这个插件！</p>
</blockquote>
</blockquote>
<p>首先安装</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i copy-webpack-plugin -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>webpack配置</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> CopyWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"copy-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
<span class="token keyword">new</span> <span class="token class-name">CopyWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token comment">//from从哪个目录复制到to哪个目录</span>
    <span class="token punctuation">&#123;</span> <span class="token keyword">from</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"doc"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> to<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist"</span><span class="token punctuation">)</span> <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>打包…</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">Version: webpack 4.43.0
Time: 914ms
Built at: 2020-05-12 18:29:34
                                     Asset       Size  Chunks                         Chunk Names
                         1.bundlef7786e.js  233 bytes       1  [emitted] [immutable]  
                     1.bundlef7786e.js.map  213 bytes       1  [emitted] [dev]        
                                1.main.css  211 bytes       1  [emitted]              
                            1.main.css.map  363 bytes       1  [emitted] [dev]        
                         2.bundlef7786e.js  233 bytes       2  [emitted] [immutable]  
                     2.bundlef7786e.js.map  212 bytes       2  [emitted] [dev]        
                                2.main.css   88 bytes       2  [emitted]              
                            2.main.css.map  215 bytes       2  [emitted] [dev]        
                                 ReadMe.md   23 bytes          [emitted]              
                           bundlef7786e.js   37.7 KiB       0  [emitted] [immutable]  main
                       bundlef7786e.js.map   41.2 KiB       0  [emitted] [dev]        main
                               favicon.ico   8.65 KiB          [emitted]              
image&#x2F;d093a6a37e8b4cafd004e7f8a6a5a389.ico   8.65 KiB          [emitted]              
                                index.html  332 bytes          [emitted]              
Entrypoint main &#x3D; bundlef7786e.js bundlef7786e.js.map<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p><strong>看到里面有个md文件</strong><br>结果</p>
<blockquote>
<p>打包前<br>|-doc<br>|—ReadMe.md<br>打包后<br>|-dist<br>|—bsdaszsda.js<br>|—…<br>|—ReadMe.md</p>
</blockquote>
<h3 id="3-bannerWebpackPlugi"><a href="#3-bannerWebpackPlugi" class="headerlink" title="3.bannerWebpackPlugi"></a>3.bannerWebpackPlugi</h3><blockquote>
<p>n版权插件！（webpack内置插件！)</p>
</blockquote>
<p>webpack配置文件</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">const webpack &#x3D; require(&quot;webpack&quot;);
new webpack.BannerPlugin(&quot;author:changhao,盗版必杀之！！&quot;),<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>


<p>打包结果！<br>随便看一个打包后的文件哈哈哈</p>
<div class="code-wrapper"><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/*! author:changhao,盗版必杀之！！ */</span>
<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>235<span class="token punctuation">,</span> 211<span class="token punctuation">,</span> 208<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/*# sourceMappingURL=2.main.css.map*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>笑笑死~~</p>
<h2 id="13-Webpack配置跨域！"><a href="#13-Webpack配置跨域！" class="headerlink" title="13.Webpack配置跨域！"></a>13.Webpack配置跨域！</h2><blockquote>
<p>我们在本地开发的时候，后端接口可能只对线上服务器环境开启允许跨域请求！所以我们在本地开发的时候需要配置一个跨域的环境，来拿到服务器端的数据！</p>
</blockquote>
<p>我们先使用<code>webpack自带的express</code>搭建一个简单的服务器接口！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"express"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
app<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  res<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
    name<span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"启动成功"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>测试返回数据</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#123;
    &quot;name&quot;: &quot;test&quot;
&#125;	<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>


<p>我们试着在我们搭建的webpack环境中请求一下这个接口！<br><strong>此时项目端口号是5200，而接口地址端口号是3000,是会有跨域限制的</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//项目中进行http请求</span>
<span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">"GET"</span><span class="token punctuation">,</span> <span class="token string">"/api/test"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    
xhr<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">xhr</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>target<span class="token punctuation">.</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    
xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>



<p>打开浏览器</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">请求 URL: http:&#x2F;&#x2F;localhost:3000&#x2F;test
引用站点策略: no-referrer-when-downgrade
Content-Length: 15
Content-Type: application&#x2F;json; charset&#x3D;utf-8
Date: Tue, 12 May 2020 14:27:07 GMT
ETag: W&#x2F;&quot;f-HbiD0GRM+ijPjZ&#x2F;N3Kw+6WxMTNI&quot;
X-Powered-By: Express
    
    
Access to XMLHttpRequest at &#39;http:&#x2F;&#x2F;localhost:3000&#x2F;test&#39; from origin &#39;http:&#x2F;&#x2F;localhost:5200&#39; has been 
blocked by CORS policy: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource.
main.js:34 GET http:&#x2F;&#x2F;localhost:3000&#x2F;test net::ERR_FAILED
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>出现了跨域，因为端口号不相同！<br>这个时候我们就要在webpack中配置跨域，来让我们在开发环境中，不被允许跨域的情况下访问到服务器资源！<br>使用webopack的服务器做了一层代理：</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">devServer<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
   proxy<span class="token operator">:</span> <span class="token punctuation">[</span>
     <span class="token punctuation">&#123;</span>
       context<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/auth"</span><span class="token punctuation">,</span> <span class="token string">"/api"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token comment">//这里可以配置多个</span>
       target<span class="token operator">:</span> <span class="token string">"http://localhost:3000"</span><span class="token punctuation">,</span><span class="token comment">//重定向的目标服务器地址</span>
       pathRewrite<span class="token operator">:</span> <span class="token punctuation">&#123;</span><span class="token comment">//我们使用代理接口时会加上api但是实际地址没有api字段,我们可以把他隐藏</span>
         <span class="token string">"^/api"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
       <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
     <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   <span class="token punctuation">]</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>配置完成，重启再次请求！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#123;&quot;name&quot;:&quot;test&quot;&#125;&#x2F;&#x2F;成功拿到数据！<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<h2 id="14-webpack常用配置"><a href="#14-webpack常用配置" class="headerlink" title="14.webpack常用配置!"></a>14.webpack常用配置!</h2><h3 id="1-引入包时省略路径"><a href="#1-引入包时省略路径" class="headerlink" title="1.引入包时省略路径"></a>1.引入包时省略路径</h3><blockquote>
<p>当我们使用第三方包，webpack默认会在node_modules里面逐级向上寻找模块包来使用！，我们使用resolve可以限制一下缩小的范围节省时间，你也可以使用resolve指定解析你自己创建的包.</p>
</blockquote>
<p>当我们安装一个第三方包，比如Vue</p>
<p>我们把一切都安装完成之后拿来用！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">"../node_modules/vue/dist/vue"</span><span class="token punctuation">;</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
  el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
  data<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    message<span class="token operator">:</span> <span class="token string">"hi this is your Vue"</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>编译</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
       hi this is your Vue   
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>



<p>此时页面dom树是解析正常的，但是我们现在引入vue这个包，要在代码里写那么长一段路径！<br>一是，<br>假如我们的包过多，而且使用的地方非常多，不太好统一管理！<br>我们希望像下面这样引入包</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>

<p>但是直接引入，发现在运行发现会报错，</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
Either pre-compile the templates into render functions, or use the compiler-included build.
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>因为此时的代码并不知道我们这个vue包具体在哪里。。我们需要使用webpak来配置一下。</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">resolve<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
   alias<span class="token operator">:</span> <span class="token punctuation">&#123;</span> <span class="token comment">//alias这个单词有别名的意思！</span>
     vue<span class="token operator">:</span> <span class="token string">"vue/dist/vue.js"</span><span class="token punctuation">,</span> <span class="token comment">//也就是引入这个路径可以起个名字叫vue，这样我们就可以方便在项目里面引入啦！</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>

<p>配置之后我们再看看页面的dom就正常啦！</p>
<div class="code-wrapper"><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
       hi this is your Vue   
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>




<h3 id="2-省略文件扩展名配置"><a href="#2-省略文件扩展名配置" class="headerlink" title="2.省略文件扩展名配置"></a>2.省略文件扩展名配置</h3><p>比如我们经常在vue中引入一个组件，不加扩展名！是怎么实现的呢？</p>
<p><strong>首先在我们从零构建的项目里试一下</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">import App from &quot;.&#x2F;App&quot;;  <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>

<p>发现会报错！因为找不到这个文件！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">client:159 .&#x2F;src&#x2F;main.js  
Module not found: Error: Can’t resolve ‘.&#x2F;App’ in ‘&#x2F;Users&#x2F;root1&#x2F;study&#x2F;C\_Better\_Webpack&#x2F;src’<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>我们就可以配置resolve的extensions（可以理解成扩展范围，就是按照这个扩展名范围来找）</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">resolve<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
   alias<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
     vue<span class="token operator">:</span> <span class="token string">"vue/dist/vue.js"</span><span class="token punctuation">,</span>
   <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   extensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">".js"</span><span class="token punctuation">,</span> <span class="token string">".css"</span><span class="token punctuation">,</span> <span class="token string">".vue"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//是有优先级的，从左往右！</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p><a target="_blank" rel="noopener" href="https://webpack.js.org/configuration/resolve/#resolve">webpack-resolve文档</a></p>
<h3 id="3-noParse-不解析依赖"><a href="#3-noParse-不解析依赖" class="headerlink" title="3.noParse 不解析依赖"></a>3.noParse 不解析依赖</h3><blockquote>
<p>我们知道在打包的时候，<strong>webpack会去node_modules下面找到你代码中引入的包，然后再去看看有没有引用什么相关依赖</strong>，但是有的包我们就知道他是一个独立的包，不需要解析依赖，那么我们主动告诉webpack不需要去解析依赖直接打包，就很节省我们的打包时间！</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js">module<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">//模块，配置使webpack支持其他文件格式！</span>
  noParse<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">vue</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>我们之前打包时间是要</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">Version: webpack 4.43.0
Time: 2832ms
Built at: 2020-05-13 19:50:26<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>配置之后</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">Version: webpack 4.43.0
Time: 2245ms
Built at: 2020-05-13 19:52:05<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>


<p>看出来的确会快一点点，那么包多了可能就更明显把哈哈</p>
<h3 id="4-webpack-IgnorePlugin-可以理解为按需引入包！"><a href="#4-webpack-IgnorePlugin-可以理解为按需引入包！" class="headerlink" title="4.webpack.IgnorePlugin 可以理解为按需引入包！"></a>4.webpack.IgnorePlugin 可以理解为按需引入包！</h3><blockquote>
<p>当我们有一些包，我们有时候仅仅使用了其中一两个方法，但是打包的时候会将所有的包打包给我们，这些是没必要的啦</p>
</blockquote>
<p>这里我们用文档的案例把，我们还原一下。<br><a target="_blank" rel="noopener" href="https://webpack.docschina.org/plugins/ignore-plugin/#src/components/Sidebar/Sidebar.jsx">IgnorePlugin</a></p>
<p>安转moment包并且使用</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm install moment --save <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> moment <span class="token keyword">from</span> <span class="token string">"moment"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">startOf</span><span class="token punctuation">(</span><span class="token string">"day"</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">fromNow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//20 hours ago使用成功</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>我们看一下生成环境下的打包信息<br>我们可以看到目前主js文件 用了280 KiB </p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">bundleada867.js 280 KiB 0 \[emitted\] \[immutable\] \[big\] main<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>因为这个包里面带了很多语言包！就是支持各种语言的！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F;moment默认使用英文我们使用一下他的语言包

moment.locale(&quot;zh-cn&quot;);
const d &#x3D; moment()
  .startOf(&quot;day&quot;)
  .fromNow();
console.log(d); &#x2F;&#x2F;20 小时前&#96; <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>当我们打包的时候<strong>这个包的所有语言包都会被打包进来</strong><br>这个时候我们配置一下这个插件</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>IgnorePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
   contextRegExp<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">moment$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><span class="token comment">//匹配moment包</span>
   resourceRegExp<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\.\/locale$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span><span class="token comment">//匹配语言包locales文件！</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>然后再去打包！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">Built at: 2020-05-13 20:27:14
                       Asset       Size  Chunks                        
bundle1117aa.js   60.9 KiB       0  [emitted] [immutable]  main<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>


<p>我们发现这个包居然只剩60kib啦！</p>
<p>不过此时，由于这些包已经被忽略打包了，你<strong>需要按需引入才能使用。</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> <span class="token string">"moment/locale/zh-cn"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token function">moment</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">startOf</span><span class="token punctuation">(</span><span class="token string">"day"</span><span class="token punctuation">)</span>
  <span class="token punctuation">.</span><span class="token function">fromNow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//21 小时前</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<h3 id="5-webpack-动态链接库DLL"><a href="#5-webpack-动态链接库DLL" class="headerlink" title="5.webpack 动态链接库DLL!"></a>5.webpack 动态链接库DLL!</h3><blockquote>
<p>Webpack构建时接入动态链接库的思想后，会大大提升构建速度。 原因在于包含大量复用模块的动态链接库只需要编译一次，在之后的构建过程中被动态链接库包含的模块将不会在重新编译，而是直接使用动态链接库中的代码。 动态链接库中大多数包含的是常用的第三方模块</p>
</blockquote>
<p>我们自己玩一下，我们把vue第三方模块，做成动态链接库玩一玩！！</p>
<p>我们用一个dill文件夹，来放我们，打包第三方模块成dill库的配置文件</p>
<blockquote>
<p>|–dll<br>|—-webpacl.vue.js</p>
</blockquote>
<p>写一下这个配置文件</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"webpack"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  mode<span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
  entry<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    vue<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"vue"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  output<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    filename<span class="token operator">:</span> <span class="token string">"_dll_[name].js"</span><span class="token punctuation">,</span>
    path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    library<span class="token operator">:</span> <span class="token string">"_dll_[name]"</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token comment">//生成一个json文件，如果dill库多了，所有的库的信息都放在这个生成的json文件中，后面webpack也要去这个文件中自己查找并且引入dll库</span>
    <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
      name<span class="token operator">:</span> <span class="token string">"_dll_[name]"</span><span class="token punctuation">,</span>
      path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist/manifest.json"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>看一下打包后的结果！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&gt;|-dist  
&gt;|–\_dill\_vue.js  
&gt;|–manifest.json<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p><code>_dill_vue.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F;我们可以看到这里被变量接收到！
var _dll_vue &#x3D; &#x2F;******&#x2F; (function(modules) &#123; 
  &#x2F;&#x2F; webpackBootstrap
  &#x2F;******&#x2F; &#x2F;&#x2F; The module cache
  &#x2F;******&#x2F; var installedModules &#x3D; &#123;&#125;; &#x2F;&#x2F; The require function
  &#x2F;******&#x2F;
  &#x2F;******&#x2F; &#x2F;******&#x2F; function __webpack_require__(moduleId) &#123;
    &#x2F;******&#x2F;
    &#x2F;******&#x2F; &#x2F;&#x2F; Check if module is in cache
    &#x2F;******&#x2F; if (installedModules[moduleId]) &#123;
      &#x2F;******&#x2F; return installedModules[moduleId].exports;
      &#x2F;******&#x2F;
   
      return value;
....................
    
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>生成的<code>manifest.json </code>算是一个类似查询表的功能，webpack直接在json文件查到包的位置</p>
<div class="code-wrapper"><pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token punctuation">&#123;</span>
  <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"_dill_vue"</span><span class="token punctuation">,</span>
  <span class="token property">"content"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    <span class="token property">"./node_modules/process/browser.js"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
      <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"./node_modules/process/browser.js"</span><span class="token punctuation">,</span>
      <span class="token property">"buildMeta"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span> <span class="token property">"providedExports"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token property">"./node_modules/setimmediate/setImmediate.js"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
      <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"./node_modules/setimmediate/setImmediate.js"</span><span class="token punctuation">,</span>
      <span class="token property">"buildMeta"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span> <span class="token property">"providedExports"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token property">"./node_modules/timers-browserify/main.js"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
      <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"./node_modules/timers-browserify/main.js"</span><span class="token punctuation">,</span>
      <span class="token property">"buildMeta"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span> <span class="token property">"providedExports"</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token property">"./node_modules/vue/dist/vue.runtime.esm.js"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
      <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"./node_modules/vue/dist/vue.runtime.esm.js"</span><span class="token punctuation">,</span>
      <span class="token property">"buildMeta"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
        <span class="token property">"exportsType"</span><span class="token operator">:</span> <span class="token string">"namespace"</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>上面就是vue第三方模块被打包成dll库，然后我们看看怎么方便的使用呢？<br>我们在打包构建的时候，先让他去dll动态链接库里面找，找不到再把node_modules里面的包给打包到项目里面</p>
<h3 id="下面我们就配置让webpack打包的时候自己去找对应的dll动态库！，找不到在打包！"><a href="#下面我们就配置让webpack打包的时候自己去找对应的dll动态库！，找不到在打包！" class="headerlink" title="下面我们就配置让webpack打包的时候自己去找对应的dll动态库！，找不到在打包！"></a>下面我们就配置让webpack打包的时候自己去找对应的dll动态库！，找不到在打包！</h3><p><code>webpack.common.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//使用webpack内置的 DllReferencePlugin (Dll引用插件！) </span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"webpack"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllReferencePlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
      manifest<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"dist/manifest.json"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>我感觉这个东西就只是使用在开发环境，把较大的第三方包，先单独打包，然后根据配置出的清单json文件引入，只是节省了每次修改代码之后，打包的构建速度，不能更改最终上线项目包的大小，也不在乎什么打包构建速度.</p>
<h3 id="6-happypack快乐打包实现多线程打包"><a href="#6-happypack快乐打包实现多线程打包" class="headerlink" title="6.happypack快乐打包实现多线程打包"></a>6.happypack快乐打包实现多线程打包</h3><blockquote>
<p>多线程打包在项目的大小达到一定程度才能体现出多线程打包的速度！当你项目过小的时候，反而会降低打包的速度，我们在这里只是讲一下使用方法！<br>我们先看一下普通打包的信息,只用了1.9s</p>
</blockquote>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">｢wdm｣: Hash: 049a7b9e5ac2cf488c78
   Version: webpack 4.43.0
   Time: 1908ms
   Built at: 2020-05-14 10:08:34<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></div>

<h3 id="安装配置happypack"><a href="#安装配置happypack" class="headerlink" title="安装配置happypack"></a>安装配置happypack</h3><div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">npm i happypack -D<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>


<p>然后配置使用，用法有点像loader,我们在打包编译某些模块loader,比如js模块，我们把babel-loader换成happypack来打包，我们来看一下配置文件</p>
<p><strong>先配置js的loader</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token punctuation">&#123;</span>
   test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
   use<span class="token operator">:</span> <span class="token string">"happypack/loader?id=js"</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token comment">//当匹配到js文件，使用happypack-loader,</span>
<span class="token comment">//然后去happypack实例插件找id对应的文件（这里是js）的loader配置</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后配置happypack插件</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">new</span> <span class="token class-name">happypack</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span>
      id<span class="token operator">:</span> <span class="token string">"js"</span><span class="token punctuation">,</span><span class="token comment">//loader对应id</span>
      use<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">&#123;</span>
          loader<span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
          exclude<span class="token operator">:</span> <span class="token string">"/node_modules/"</span><span class="token punctuation">,</span>
          options<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
            presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后启动项目查看打包信息</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">Happy[js]: Version: 5.0.1. Threads: 3
[HPM] Proxy created: [ &#39;&#x2F;auth&#39;, &#39;&#x2F;api&#39; ]  -&gt;  http:&#x2F;&#x2F;localhost:3000
[HPM] Proxy rewrite rule created: &quot;^&#x2F;api&quot; ~&gt; &quot;&quot;
ℹ ｢wds｣: Project is running at http:&#x2F;&#x2F;localhost:8080&#x2F;
ℹ ｢wds｣: webpack output is served from &#x2F;
ℹ ｢wds｣: Content not from webpack is served from &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack
Happy[js]: All set; signaling webpack to proceed.
ℹ ｢wdm｣: Hash: 78e952e4cae7bf69ff44
Version: webpack 4.43.0
Time: 3230ms
Built at: 2020-05-14 10:15:09<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>发现 Threads: 3 使用了三个线程去打包！但是时间却用了3s，这就是简介中说的</p>
<blockquote>
<blockquote>
<p>多线程打包在项目的大小达到一定程度才能体现出多线程打包的速度！当你项目过小的时候，反而会降低打包的速度.因为分配线程也会增加一些性能消耗</p>
</blockquote>
</blockquote>
<h3 id="7-webpack-tree-shaking"><a href="#7-webpack-tree-shaking" class="headerlink" title="7.webpack-tree-shaking"></a>7.webpack-tree-shaking</h3><blockquote>
<p>我们在开发的时候，CV必不可少！经常把别人的方法复制来用，免复制多了有的没用上，但是也留在了我们的代码里面！你也可以es-lint配置！但是这次我们就看看webpack自带的优化tree-shaking把没用的代码自动删除</p>
</blockquote>
<p>我们先在<code>utils.js</code>定义两个函数方法,然后使用es6的导出方式！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">return</span> num1 <span class="token operator">+</span> num2<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> <span class="token function-variable function">decrease</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num1<span class="token punctuation">,</span> num2</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
      <span class="token keyword">return</span> num1 <span class="token operator">-</span> num2<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
    
    <span class="token keyword">export</span> <span class="token punctuation">&#123;</span>
      add<span class="token punctuation">,</span>
      decrease<span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>然后在main.js导入 但是只使用add方法！</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">&#123;</span> add<span class="token punctuation">,</span> decrease <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> “<span class="token punctuation">.</span><span class="token operator">/</span>utils”<span class="token punctuation">;</span>  
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>
<p>然后给他打包(开发环境)</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">mode: &quot;development&quot;,<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></div>
<p>查看打包后的代码</p>
 <div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"> <span class="token comment">/***/</span> <span class="token string">"./src/common.js"</span><span class="token operator">:</span>
    <span class="token comment">/*!***********************!*\
      !*** ./src/common.js ***!
      \***********************/</span>
    <span class="token comment">/*! exports provided: add, decrease */</span>
    <span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">module<span class="token punctuation">,</span> __webpack_exports__<span class="token punctuation">,</span> __webpack_require__</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
<span class="token operator">...</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>发现虽然没有被使用但是还是被打包喽。<br>然后看看生产模式,两个函数都使用的情况下。。这个我就比较醉了，因为整个函数被打包完之后变成了这个样子！</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">import &#123; add, decrease &#125; from &quot;.&#x2F;utils&quot;;
 console.log(decrease);
 console.log(add(1 + 1));
 
 const decrease &#x3D; (num1, num2) &#x3D;&gt; &#123;
   return num1 - num2;
 &#125;;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>变成了=&gt;</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t<span class="token punctuation">,</span> r</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
 <span class="token string">"use strict"</span><span class="token punctuation">;</span>
   r<span class="token punctuation">.</span><span class="token function">r</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">var</span> n<span class="token punctuation">;</span>
   r<span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     r<span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">//这里是console.log(decrease);编译后的</span>
       <span class="token keyword">return</span> e <span class="token operator">-</span> t<span class="token punctuation">;</span>
     <span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">+</span> n<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
   <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p> 虽然依稀认出人形但是找的我好ಥ_ಥ！，</p>
<p> 那我们看看生产模式下 decrease方法不被使用的时候能不能找到</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//生产模式下，decrease函数未被使用！</span>
<span class="token keyword">import</span> <span class="token punctuation">&#123;</span> add<span class="token punctuation">,</span> decrease <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">"./utils"</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></div>
<p>我们可以看出下面的代码就少了一块</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t<span class="token punctuation">,</span> r</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
<span class="token string">"use strict"</span><span class="token punctuation">;</span>
  r<span class="token punctuation">.</span><span class="token function">r</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> n<span class="token punctuation">;</span>
  r<span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    r<span class="token punctuation">.</span><span class="token function">e</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>r<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token operator">+</span> n<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>可以简单总结一下下</p>
<blockquote>
<blockquote>
<p>webpack在生产模式下，不会去打包项目中没有用的代码，开发模式则都会一起打包出去！因为开发的时候你可能是要随时可能用的，肯定要丢进去啦！</p>
</blockquote>
</blockquote>
<p>那我们看看webpack对<code>common.js的require，module.export</code>的导入导出有没有优化呢！</p>
<p>我们直接看生产模式下的把</p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//导出！</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
  add<span class="token punctuation">,</span>
  decrease<span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">//引入使用</span>
<span class="token keyword">const</span> <span class="token punctuation">&#123;</span> add<span class="token punctuation">,</span> decrease <span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./untis"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//打包结果</span>
  <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    e<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">&#123;</span>
      <span class="token function-variable function">add</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> e <span class="token operator">+</span> t<span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
      <span class="token function-variable function">decrease</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> t</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">return</span> e <span class="token operator">-</span> t<span class="token punctuation">;</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>发现不仅被打包了，还很清晰哈哈哈，</p>
<h2 id="15-webpack将开发和生成环境配置分离开来-webpack-merge"><a href="#15-webpack将开发和生成环境配置分离开来-webpack-merge" class="headerlink" title="15.webpack将开发和生成环境配置分离开来-webpack-merge"></a>15.webpack将开发和生成环境配置分离开来-webpack-merge</h2><blockquote>
<p>我们在开发项目的时候，我们在找一些配置错误的时候，可以将不同环境的配置写在不同的文件中！这样开发或者生产的环境有问题直接去对应的配置文件检查就好了，有利于项目的维护与错误定位</p>
</blockquote>
<p><strong>开发配置文件目录</strong></p>
<p>我个人习惯喜欢把配置文件放在一个build文件夹中</p>
<blockquote>
<p>|-build<br>|—webpack.common.js //放一些公共的配置，入口出口，插件，模块啊等等<br>|—webpack.prod.js //放生产环境的配置,optimization优化，一些打包的优化插件等等<br>|—webpack.dev.js //放开发环境的配置，source-map，devServer等等…</p>
</blockquote>
<p><strong>下一步，如何比较好的将这些文件串起来嘞</strong></p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F;首先安装这个插件！
npm i webpack-merge -D<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></div>


<p>然后使用就完事了</p>
<p> <code>webpack.dev.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">&#123;</span> smart <span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"webpack-merge"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//引入插件</span>
<span class="token keyword">const</span> commonConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./webpack.common"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//将公共配置文件导入</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">smart</span><span class="token punctuation">(</span>commonConfig<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span><span class="token comment">//这一步，就是合并两个配置文件啦！很容易理解的啦~</span>
  mode<span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
  devtool<span class="token operator">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    proxy<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">&#123;</span>
        context<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"/auth"</span><span class="token punctuation">,</span> <span class="token string">"/api"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        target<span class="token operator">:</span> <span class="token string">"http://localhost:3000"</span><span class="token punctuation">,</span>
        pathRewrite<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
          <span class="token string">"^/api"</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
      <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p><code>webpack.pro.js</code></p>
<div class="code-wrapper"><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">const</span> <span class="token punctuation">&#123;</span> smart <span class="token punctuation">&#125;</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"webpack-merge"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//引入插件</span>
<span class="token keyword">const</span> commonConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./webpack.common"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//将公共配置文件导入</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">smart</span><span class="token punctuation">(</span>commonConfig<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span><span class="token comment">//这一步，就是合并两个配置文件啦！很容易理解的啦~</span>
  mode<span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
  optimization<span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    OptimizeCSSAssetsPlugin优化css去掉空格和换行
    minimizer<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">TerserJSPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">OptimizeCSSAssetsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">&#123;</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>` <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>配置<code>package.json</code>，就来配置我们的启动脚本啦~~</p>
<div class="code-wrapper"><pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">&#123;</span>
    <span class="token property">"test"</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span>
    <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"webpack --config  ./build/webpack.prod.js"</span><span class="token punctuation">,</span> <span class="token comment">//打包的时候使用</span>
    <span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"webpack-dev-server --config  ./build/webpack.dev.js"</span><span class="token comment">//开发的时候使用！</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>


<p>我们启动的terminal信息</p>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">root1@此男只应天上有 C_Better_Webpack % npm run dev
    
&gt; c_better_webpack@1.0.0 dev &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack
&gt; webpack-dev-server --config  .&#x2F;build&#x2F;webpack.dev.js &#x2F;&#x2F;dev这里加载这个配置文件
    
[HPM] Proxy created: [ &#39;&#x2F;auth&#39;, &#39;&#x2F;api&#39; ] -&gt; http:&#x2F;&#x2F;localhost:3000&#x2F;&#x2F;文件的配置挂载成功
[HPM] Proxy rewrite rule created: &quot;^&#x2F;api&quot; ~&gt; &quot;&quot;
ℹ ｢wds｣: Project is running at http:&#x2F;&#x2F;localhost:8080&#x2F;
ℹ ｢wds｣: webpack output is served from &#x2F;
ℹ ｢wds｣: Content not from webpack is served from &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack
ℹ ｢wdm｣: Hash: f71250e872f74fea77cb
Version: webpack 4.43.0
Time: 2493ms
Built at: 2020-05-13 11:36:16<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<div class="code-wrapper"><pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F;生成打包也一样成功啦！
root1@此男只应天上有 C_Better_Webpack % npm run build
    
&gt; c_better_webpack@1.0.0 build &#x2F;Users&#x2F;root1&#x2F;study&#x2F;C_Better_Webpack
&gt; webpack --config  .&#x2F;build&#x2F;webpack.prod.js
    
    
webpack is watching the files…
    
Hash: 69292135d79b22ed6771
Version: webpack 4.43.0
Time: 4228ms
Built at: 2020-05-13 11:52:44
    <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></div>
<p>说明配置环境配置文件成功啦</p>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AFwebpack/">前端webpack</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/javaScript/">javaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/posts/28963/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">整理一下垂直水平居中的方法！5种方法！</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/posts/14576/">
                        <span class="hidden-mobile">JavaScript基础面试记录</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script type="text/javascript">
    Fluid.utils.waitElementVisible('vcomments', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js', function () {
        new Valine({
          el: "#vcomments",
          app_id: "Mi65hxq7VAFUDwOLeIGAOgiV-gzGzoHsz",
          app_key: "hMuhiD4FRqhns4giqLiEH9HG",
          placeholder: "说点什么",
          path: window.location.pathname,
          avatar: "retro",
          meta: ["nick","mail","link"],
          pageSize: "10",
          lang: "zh-CN",
          highlight: false,
          recordIP: false,
          serverURLs: "",
        });
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the
    <a target="_blank" href="https://valine.js.org" rel="nofollow noopener noopener">comments powered by Valine.</a>
  </noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
    

  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        豫ICP备20009912号-1
      </a>
    </span>
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":true,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    
      <script  src="/js/lazyload.js" ></script>
    
  



  
    
  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "http://qiniuyun.quancundexiwang.wang/xmlSearch.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
